<template>
  <div>
    <myheader :img_src='img '/>
    用户中心<br />
    用户名:{{ user.username }}<br />
    手机号:{{ user.mobile | mobilefilter }}<br />
    头像<br /><van-image
    round
  width="20rem"
  height="20rem"
  :src="img"
/>
    上传头像：<van-uploader :after-read="afterRead" />
  </div>
</template>

<script>
import myheader from "../myheader";
export default {
  data() {
    return {
      user: {},
      userid: localStorage.getItem("userid"),
      img:''
    };
  },
  filters: {
    mobilefilter(value) {
        //把手机号给隐藏
        if(value){
          return value.slice(0, 3) + "******" + value.slice(-3, -1);
        }

    },
  },
  methods: {
    get_info() {
        //根据用户id查用户信息
      this.$axios.get("/users/get_info?userid=" + this.userid).then((res) => {
        this.user = res.data.user
        this.img ='http://localhost:5000/static/upload/'+this.userid+'/'+ res.data.user.avater
        ;
      });
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      //传文件 重新构造一个data
      let data = new FormData()
      data.append('file',file.file)
      data.append('userid',this.userid)
      this.$axios.post('/users/upload',data)
      .then(res=>{
          if(res.data.code==200){
              alert('添加成功')
              // this.img = 'http://localhost:5000/static/upload/'+ res.data.filename

          }

      })
      console.log(file);
    },
  },
  components: {
    myheader: myheader,
  },

  mounted() {
    this.get_info();
  },
};
</script>

<style scoped>
</style>
